<template>
  <div>
    <el-row type="flex">
      <div class="bank-title">{{ title }}</div>
      <el-button size="small" @click="visible = true">选择题库</el-button>
    </el-row>
    <el-dialog title="选择题库" :visible.sync="visible" with="60%" :close-on-click-modal="false">
      <el-form size="mini" :model="bank" :inline="true">
        <el-form-item label="题库分类"><edu-cascader :options="config.category.options" :value.sync="cascader" :args="config.category.args" /></el-form-item>
        <el-form-item label="启用状态"><edu-select :options="config.status.options" :value.sync="bank.status" :args="{}" /></el-form-item>
        <el-form-item label="题库名称"><el-input v-model="bank.title" placeholder="请输入题库名称关键字" clearable /></el-form-item>
        <el-form-item><el-button @click="search">搜索</el-button></el-form-item>
      </el-form>
      <el-table v-loading.lock="loading" :data="datas" style="width: 100%" height="400">
        <el-table-column label="选择" width="50">
          <template slot-scope="scope">
            <el-radio v-model="bank_id" :label="scope.row.id">{{ '' }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="题库名称" />
        <el-table-column prop="cates" label="所属分类" />
        <el-table-column prop="status" label="启用状态" width="96">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page.sync="paginate.page" :page-size="paginate.count" layout="total, prev, pager, next,jumper" :total="total" @current-change="handleCurrentChange" />
      <div slot="footer" class="choose-footer">
        <el-button type="primary" size="small" @click="choose">确认</el-button>
        <el-button size="small" @click="visible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EduCascader from '@public/form/cascader.vue';
import EduSelect from '@public/form/select.vue';
export default {
  components: {
    EduCascader,
    EduSelect
  },
  props: {
    value: {
      type: Number,
      default: 0
    },
    cates: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false, // 是否显示
      bank_id: this.value, // 当前选中的题库ID
      response: null, // 列表返回数据
      cascader: null, // 筛选的分类
      loading: true,
      // 题库筛选数据
      bank: {
        title: '',
        category: '',
        status: ''
      },
      // 分页
      paginate: {
        count: 16,
        page: 1
      },
      category: [],
      // 配置信息
      config: {
        category: {
          options: [],
          args: {
            tigger: 'hover'
          }
        },
        status: {
          options: []
        }
      }
    };
  },
  computed: {
    datas() {
      if (this.response) {
        return this.response.data.datas;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.data.paginate.total;
      }
      return 0;
    },
    title() {
      if (this.response && this.bank_id) {
        const index = this.datas.findIndex(item => item.id == this.bank_id);
        if (index === -1) {
          return '';
        }
        return this.datas[index].title;
      }
      return '';
    }
  },
  watch: {
    cascader: {
      handler(datas) {
        const value = datas;
        const [val] = [...value].reverse();
        this.$set(this.bank, 'category', val);
      },
      deep: true
    }
  },
  created() {
    this.loadData();
    this.$http.get(
      '/exam/admin/question/bank/choose',
      {},
      response => {
        const { category, status } = response.data;
        this.$set(this.config.category, 'options', category);
        this.$set(this.config.status, 'options', status);
      },
      _ => {}
    );
  },
  methods: {
    // 加载数据方法
    loadData: function() {
      this.loading = true;
      this.$http.get(
        '/exam/admin/question/bank/getChooseList',
        {
          ...this.paginate,
          ...this.bank
        },
        response => {
          this.response = response;
          this.loading = false;
        },
        _ => {
          this.loading = false;
        },
        false
      );
    },
    // 分页
    handleCurrentChange: function(page) {
      this.paginate.page = page;
      this.loadData();
    },
    // 搜索
    search: function() {
      this.paginate.page = 1;
      this.loadData();
    },
    // 选择
    choose: function() {
      const category = this.response.data.datas.find(item => item.id == this.bank_id).category;
      this.$emit('update:value', this.bank_id);
      this.$emit('update:cates', category);
      this.visible = false;
      this.$emit('changeId')
    }
  }
};
</script>

<style scoped>
.bank-title {
  margin-right: 10px;
}
</style>
